5.5 Màn Hình Runtime
5.5.7 Đối Tượng Slider
Slider giúp người dùng có cách nhìn trực quan và thú vị khi thay đổi giá trị của đối tượng được gán vào nó bằng thao tác kéo thả thanh trượt. Các bước làm việc với Slider.
Bước 1: Đầu tiên cần tạo Class để đưa vào cho đối tượng các thuộc tính mong muốn mà thư viện chuẩn chưa có. Ví dụ như là TagAssign, Decription ..v..v
Trong đó đối tượng ngoài có các thuộc tính mặc định của xcode hỗ trợ thì nay có thêm thuộc tính tagAssign và decription phục vụ cho nhu cầu viết code.
Các hàm Init trong file .m phục vụ cho việc khởi tạo một đối tượng mới với các thông số khởi tạo mong muốn.
Bước 2: Trong giao diện Runtime tạo tool khi click vào nó sẽ tạo ra một đối tượng Slider với các thông sốt cơ bản mặc định trước.
Tạo 1 image với hình là hình Slider được chụp lại trước. (chụp hình trên Mac OS bằng phím tắt Comand + Shift + 4).
Từ khung công cụ ta chọn UIImage và kéo vào giao diện chính -(void)showDataOnTextField{
for (int i= 0; i<textFields.count; i++) {
textFieldInProcess = [textFields objectAtIndex:i];
Tag *tagXML = [ProjectParser takeTagFromProject:mainDelegate.project deviceName:@"device 1" tagName:textFieldInProcess.tagAssign];
textFieldInProcess.text = tagXML.value; }
Page 67
Hình 5-26 Giao diện thiết kế Slider
Sau đó chọn Image vừa được tạo và gán hình cho nó.
Hình 5-27 Giao diện thiết kế Slider
Gán TapGestureRecognizer lên image để khi người dùng chạm lên image thì sẽ tạo ra đối tượng Slider.
Page 68 Hàm ngắt khi người dùng tap vào image
- (void) createSlider: (UITapGestureRecognizer *) tapedCreateSlider {
panSliderGesture =[[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(dragGesture:)];
[panSliderGestureArray addObject:panSliderGesture];
tapSliderGesture= [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapSlider:)];
//tapSliderGesture.numberOfTapsRequired=2; [tapSliderGestureArray addObject:tapSliderGesture];
pinchSliderGesture =[[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(pinchMe:)];
[pinchSliderGestureArray addObject:pinchSliderGesture];
sliderCreated = [[Slider alloc] initWithFrame:CGRectMake(205, 540, 150, 22)]; sliderCreated.tag = sliderIDTag; sliderIDTag++; [sliderCreated setUserInteractionEnabled:YES]; [sliderCreated addGestureRecognizer:tapSliderGesture]; [sliderCreated addGestureRecognizer:panSliderGesture]; [sliderCreated addGestureRecognizer:pinchSliderGesture]; [sliderArray addObject:sliderCreated]; [runTimeDisplay.displayTags.displayTag addObject:sliderCreated]; [self.view addSubview:sliderCreated];
[sliderCreated addTarget:self action:@selector(valueSliderChange:) forControlEvents:UIControlEventValueChanged];
}
tapCreateSlider = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(createSlider:)];
[createSlider addGestureRecognizer:tapCreateSlider]; [createSlider setUserInteractionEnabled:YES];
Page 69
Đối tượng mới được tạo ra được gán các GestureRecognizer như Pan, Tap và Pinch khi phát hiện có thao tác người dùng trên đối tượng thì chương trình sẽ trả về hàm ngắt tương ứng (tên hàm ngắt nằm trong phần action). Các đối tượng sẽ có cùng một tên nhưng được phân biệt dựa vào “tag” (cụ thể trong chương trình là sliderCreated.tag). Các slider cũng như các GestureRecognizer liên quan sẽ được lưu vào các mảng tương ứng để phục vụ cho các thao tác xử lý sau này (hàm phục vụ thêm đối tượng vào mảng là [yourArray
addObject:yourObject]). Cuối cùng là hàm xử lý ngắt khi người dùng kéo thanh trượt để thay đổi giá trị của tag gán trên slider “[sliderCreated addTarget:self
action:@selector(valueSliderChange:) forControlEvents:UIControlEventValueChanged];”
Hàm xử lý khi giá trị trên thanh trượt thay đổi
Trong hàm này đối tượng sliderCall là đối tượng slider có giá trị thay đổi được trả về. Hàm “[ProjectParser takeTagFromProject:mainDelegate.project
deviceName:@"device 1" tagName:nameSliderTag];” là hàm cho phép ta tìm tag trong cây quản lý project dựa theo tên của tag và device của tag đó.
Hàm [mainDelegate.modbusClient WriteSingleRegister:0
Addr:(ushort)tagSlider.modbusAddr.initValue value:(int)sliderCall.value]” dùng để gửi giá trị thay đổi của tag xuống cho device thông qua Modbus.
Bước 3: Cho phép người dùng thay đổi thuộc tính của đối tượng đã tạo ra.
Trước hết cần phải có giao diện để phục vụ cho việc thay đổi này. Như vậy ta cần tạo 1 giao diện phụ (theo kiêu UIViewController) để tạo Pop-up khi chạm vào đối tượng, trên đó sẽ có đầy đủ các thuộc tính cần thay đổi của đối tượng.
Các bước tạo một Class view mới cũng giống như tạo Class bình thường (đã được hướng dẫn ở trên) chỉ khác ở điểm là ở cửa sỗ Choose option for your new file ta chọn Subclass là UIViewController
-(void) valueSliderChange: (UISlider *) sliderCall{ if (runningStatus==true) {
NSString *nameSliderTag =[NSString
stringWithFormat:@"%@",[sliderTagArray objectAtIndex:sliderCall.tag]]; Tag *tagSlider =[[Tag alloc] init];
tagSlider = [ProjectParser takeTagFromProject:mainDelegate.project deviceName:@"device 1" tagName:nameSliderTag];
[mainDelegate.modbusClient WriteSingleRegister:0
Addr:(ushort)tagSlider.modbusAddr.intValue value:(int)sliderCall.value]; }
Page 70
Hình 5-28 Giao diện tạo Class
Thiết kế giao diện hoàn chỉnh. Nhớ chú ý phần Size nên chọn FreeForm để có thể tinh chỉnh kích thước.
Hình 5-29 Một giao diện View Edit Object
Code cho giao diện thì đã có trong file project vì nó khá dài nên không đưa vào báo cáo. Tuy nhiên trong đó có vài điểm cần chú ý đó là hàm
Page 71
Hàm này được sẽ được gọi trước khi giao diện được hiện lên, nó sẽ lấy tất cả thuộc tính của đối tượng cần thay đổi và thể hiện lên trên giao diện của chúng ta. Và đoạn code sliderCreated = slider; có ý nghĩa là con trỏ địa chỉ sliderCreated trong giao diện được gán địa chỉ của đối tượng cần được thay đổi thuộc tính. Như vậy mọi thay đổi trên sliderCreated cũng chính là thay đổi trên đối tượng chính. Vậy phần thiết kế giao diện phục vụ người dùng thay đổi thuộc tính của đối tượng đã xong, bây giờ điều cần biết là khi nào giao diện này sẽ được gọi lên. Tạm gọi là giao diện “edit”.
Trong bước tạo đối tượng Slider ta đã gán TapGestureRecognizer vào cho nên khi có thao tác chạm vào đối tượng thì ta sẽ nhận được hàm ngắt. Và trong hàm ngắt đó ta sẽ gọi giao diện “edit” lên.
Ở đây chú ý tới thuộc tính modalPresentationStyle và modalTransitionStyle của đối tượng giao diện “edit”, modalPresentationStyle là kiểu hiện thị của giao diện hiện tại đang chọn là FormSheet tức là theo kiểu Pop-up tất nhiên là còn vài kiểu hiện thị khác. Thuộc tính modalTransitionStyle thể hiện cách mà trang giao hiện sẽ hiện thị lên ở đây là kiểu Cover
-(void) tapSlider:(UITapGestureRecognizer *)tapedSlider{ sliderTapedID = tapedSlider.view.tag;
sliderInProcess = [sliderArray objectAtIndex:sliderTapedID];
//Show Edit View
sliderDesignView.modalPresentationStyle = UIModalPresentationFormSheet; sliderDesignView.modalTransitionStyle =
UIModalTransitionStyleCoverVertical;
[self presentViewController:sliderDesignView animated:YES completion:nil]; sliderDesignView.view.superview.frame = CGRectMake(50, 50, 300, 320); [sliderDesignView initViewWithPropertiOfSlider:sliderInProcess];
}
- (void) initViewWithPropertiOfSlider: (Slider *) slider{ sliderCreated = slider;
txt_Width.text = [NSString stringWithFormat:@"%.0f", slider.frame.size.width]; txt_MaxValue.text = [NSString stringWithFormat:@"%.0f",
slider.maximumValue];
txt_MinValue.text = [NSString stringWithFormat:@"%.0f", slider.minimumValue];
txt_Nametag.text = [NSString stringWithFormat:@"%@", slider.tagAssign]; }
Page 72
Vertical tức là nó sẽ che trang giao diện bên dưới nó. Còn thuộc tính “frame” chỉ vị trí, kích thước của trang giao diện sẽ hiện lên. Như vậy các hàm cũng như các xử lý đối với Slider đã xong. Đối tượng sẽ được thay đổi thuộc tính trực tiếp trong phần code của giao diện “edit”.